/*
*   @Author: 1296
*   @Date: 2025-03-29
*   @Description: 忘记密码
*/

<script setup>
import { ref } from "vue";
import axios from "axios";
import { useI18n } from "vue-i18n";
import FloatingButtons from "@/components/FloatingButtons.vue";
import router from "@/router";
import i18n from "@/i18n";
import store from "@/store";

const { t } = useI18n();
const api = axios.create({ baseURL: store.getters.getBaseURL });

const email = ref("");
const verifyCode = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const errorMessage = ref("");
const countdown = ref(0);

// 过滤非数字字符
const filterNumberInput = (event) => {
  verifyCode.value = event.target.value.replace(/\D/g, '');
};

// 验证表单逻辑
const validateForm = () => {
  if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
    errorMessage.value = t("login.errors.emailFormat");
    return false;
  }
  if (!verifyCode.value) {
    errorMessage.value = t("login.errors.verifyCodeRequired");
    return false;
  }
  if (newPassword.value.length < 6) {
    errorMessage.value = t("login.errors.passwordLength");
    return false;
  }
  if (newPassword.value !== confirmPassword.value) {
    errorMessage.value = t("login.errors.passwordMismatch");
    return false;
  }
  return true;
};

// 发送验证码
const sendVerifyCode = async () => {
  if (!email.value) {
    errorMessage.value = t("login.errors.emailRequired");
    return;
  }

  try {
    await api.post("/user/findpwd/sendCode", {
      email: email.value
    });
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) clearInterval(timer);
    }, 1000);
  } catch (error) {
    errorMessage.value = error.response?.data?.info || t("common.requestFailed");
  }
};

// 提交重置密码
const handleSubmit = async () => {
  errorMessage.value = "";
  if (!validateForm()) return;

  try {
    await api.put("/user/password", {
      email: email.value,
      code: verifyCode.value,
      newPassword: newPassword.value,
      rePassword: confirmPassword.value
    });
    alert(t("saveSuccess"));
    i18n.locale = 'zh-CN';
    await router.push('/loginAndRegister')
  } catch (error) {
    errorMessage.value = error.response?.data?.info || t("common.requestFailed");
  }
};
</script>

<template>
  <div class="forgot-password-container">
    <div class="auth-card">
      <div class="auth-header">
        <h2>{{ $t('login.resetPassword') }}</h2>
        <p class="auth-subtitle">{{ $t('login.resetInstructions') }}</p>
      </div>

      <form @submit.prevent="handleSubmit" class="auth-form">
        <!-- 邮箱输入 -->
        <div class="input-group">
          <label>{{ $t('login.email') }}</label>
          <input
              type="email"
              v-model="email"
              class="modern-input"
              :class="{ 'input-error': errorMessage && !email }"
          />
        </div>

        <!-- 验证码输入 -->
        <div class="input-group">
          <label>{{ $t('InputVerifyCode') }}</label>
          <div class="code-input-group">
            <input
                type="text"
                v-model="verifyCode"
                class="modern-input code-input"
                inputmode="numeric"
                pattern="[0-9]*"
                @input="filterNumberInput"
                maxlength="6"
            />
            <button
                type="button"
                @click="sendVerifyCode"
                class="code-button"
                :disabled="countdown > 0"
            >
              <span v-if="countdown > 0">{{ countdown }}s</span>
              <span v-else>{{ $t('getVerifyCode') }}</span>
            </button>
          </div>
        </div>

        <!-- 新密码 -->
        <div class="input-group">
          <label>{{ $t('login.newPassword') }}</label>
          <input
              type="password"
              v-model="newPassword"
              class="modern-input"
          />
        </div>

        <!-- 确认密码 -->
        <div class="input-group">
          <label>{{ $t('login.confirmPassword') }}</label>
          <input
              type="password"
              v-model="confirmPassword"
              class="modern-input"
          />
        </div>

        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-message">
          <svg-icon name="error" class="error-icon" />
          <span>{{ errorMessage }}</span>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="submit-btn">
          {{ $t('login.resetPassword') }}
        </button>

        <!-- 返回登录 -->
        <div class="back-login">
          {{ $t('login.rememberPassword') }}
          <router-link to="/loginAndRegister">{{ $t('login.loginHere') }}</router-link>
        </div>
      </form>
    </div>
  </div>
  <floating-buttons />
</template>

<style scoped>
.forgot-password-container {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2rem;
}

.auth-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  width: 100%;
  max-width: 480px;
  transition: transform 0.3s ease;
}

.auth-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-header h2 {
  font-size: 1.8rem;
  color: #2d3436;
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  color: #636e72;
  font-size: 0.95rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2d3436;
  font-size: 0.9rem;
  font-weight: 500;
}

.modern-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.modern-input:focus {
  border-color: #008FEE;
  box-shadow: 0 0 0 3px rgba(0, 143, 238, 0.2);
  outline: none;
}

.code-input-group {
  position: relative;
  display: flex;
  gap: 1rem;
}

.code-input {
  padding-right: 120px;
}

.code-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 1.5rem;
  background: #008FEE;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.code-button:hover:not(:disabled) {
  background: #0077cc;
}

.code-button:disabled {
  background: #90cdf4;
  cursor: not-allowed;
}

.error-message {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 8px;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.error-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: #008FEE;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #0077cc;
  transform: translateY(-1px);
}

.back-login {
  text-align: center;
  margin-top: 1.5rem;
  color: #636e72;
  font-size: 0.9rem;
}

.back-login a {
  color: #008FEE;
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.5rem;
}

.back-login a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .auth-card {
    padding: 2rem;
    margin: 1rem;
  }

  .code-input-group {
    flex-direction: column;
  }

  .code-button {
    position: static;
    width: auto;
    padding: 12px;
  }

  .code-input {
    padding-right: 1rem;
  }
}
</style>